<template>
	<view class="body">
		<view class="">
			<view class="app_content">
				
				<view class="lunbo2">
					<swiper
						:indicator-dots="false"
						:autoplay="true"
						circular="true"
						easing-function="default"
						:interval="2000"
						indicator-color="#c7c7c7"
						indicator-active-color="#ffffff"
						:duration="500"
						class="swiper"
					>
						<swiper-item v-for="(item, index) in banner_list">
							<view class="swiper-item"  @click="banner_tiaozhuan(item.link)"><image :src="item.image" mode="heightFix"></image></view>
						</swiper-item>
					</swiper>
				</view>
				
				<view class="zhaohu">
					<view class="zhaohu_title">
						<view class="zhaohu_title_left hei_24">
							<image src="/static/img/yonghu.png" mode=""></image> <text>{{getTimeState()}},{{user?user.username:'暂未登录'}}</text>
						</view>
						<view class="zhaohu_title_right hong_24" v-if="!user"@click="go('/pages/index/login')">
							请登录<image src="/static/img/xiangyou.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="saomiao bai_30">
					<text>扫描二维码得积分</text>
					<text class="saomiao_btn" @click="saomiao">立即扫描</text>
				</view>
				<!-- <view class="saomiao1 bai_30">
					<view class="saomiao bai_30">
					  <text class="text">扫描二维码得积分</text>
					  <text class="retro-scan-button" @click="saomiao">立即扫描</text>
					</view>
				</view> -->
				<view class="tuijian hong_30_bold">
					<text></text>好物推荐
				</view>
				<view class="tg_list hei_24" >
					<view class="item" v-for="(item,index) in list" @click="xiangqing(item.id)" >
						<view class="item_img_box">
						<view class="item_img">
							<image   :src="item.image_url?item.image_url.split(',')[0]:''" class="shang_img"  mode="aspectFill"></image>
				            <view class="shoukong_box" v-if="item.stock==0">
				            	<image src="/static/img/shoukong.png" mode="" class="shoukong"></image>
				            </view>
						</view>
						</view>
						<view class="item_bottom">
							<view class="item_name hei_30_bold PingFang">
							</view>
							<view class="item_guige hui_26">
								{{item.name}}
								
							</view>
				
						<view class="zuyong hong_22" >
							<text class="hong_32">{{Number(item.points)}}</text>积分
							
						</view>
						
						</view>
					</view>
					
				</view>
				<!-- <view class="box">
				 	<view class="box_item">
				 		
						<view class="box_item_bottom">
						  <button>立即扫码</button>
						</view>
				 	</view>
					<view class="box_item">
						<view class="box_item_bottom">
						<button>立即兑换</button>
						</view>
					</view>
				 </view> -->
      
			</view>
		</view>
		<!-- <view class="padding_bottom"></view> -->
		<!-- <tabBar :currentPage="currentPage"></tabBar> -->
<uni-popup id="tan_shibai" ref="tan_shibai" type="center">
		<view class="shibai_box shibai_box_bg">
			<!-- <view class="huode_title hei_30">
				恭喜获得
			</view>
			<view class="huode_num hei_30">
				 <text class="hong_40_bold">100</text>积分
			</view> -->
			<view class="shibai_title hei_30">
				<image src="/static/img/shibai.png" mode=""></image>
			</view>
			<view class="shibai_txt hei_30">
				{{shibai_tip}}
			</view>
			<view class="shibai_bottom">
				<button class="bai_24" @click="$refs.tan_shibai.close()">确定</button>
			</view>
		</view>
</uni-popup>
<uni-popup id="tan_success" ref="tan_success" type="center">
		<view class="shibai_box">
			<view class="popup-top-decor">
			    <view class="star star-1"></view>
			    <view class="star star-2"></view>
			</view>
			<view class="huode_title hei_30">
				🎉恭喜获得！
			</view>
			<view class="huode_num hei_30">
				 <text class="hong_40_bold">{{ma_result.points}}</text>积分
			</view>
			<view class="hui_22">
				可用于兑换美妆好物！
			</view>
<!-- 			<view class="shibai_title hei_30">
				<image src="/static/img/shibai.png" mode=""></image>
			</view>
			<view class="shibai_txt hei_30">
				无效二维码
			</view> -->
			<view class="shibai_bottom">
				<button class="bai_24" @click="$refs.tan_success.close()">确定</button>
			</view>
			<view class="popup-bottom-decor">
			    <view class="star star-3"></view>
			    <view class="star star-4"></view>
			</view>
		</view>
</uni-popup>		
		
		
		
	</view>
</template>

<script>
	// import tabBar from '@/components/tabbar/tabbar.vue';
	export default {
		data() {
			return {
                   currentPage: '/pages/index/index',
				   banner_list:[],
				   list:[],
				   user:'',
				   is_login:false,
				   page:1,
				   limit:10,
				   ma_result:'',
				   shibai_tip:''
			};
		},
		created() {},
		onLoad(option) {
             this.get_list()
			 this.get_banner_list()
		},
		onShow() {
			if(uni.getStorageSync("Cookie")){
				this.get_user()
			}
		},
		onReady() {
			// this.$refs.tan_success.open()
		},
		
		//下拉刷新
		onPullDownRefresh: function() {
			this.list = [];
			this.page = 1;
			this.get_list();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			//上拉加载
			onReachBottom() {
				console.log('上拉加载');
				if (this.is_all) {
					uni.showToast({
						title: '没有更多内容了',
						duration: 2000,
						icon: 'none'
					});
					uni.stopPullDownRefresh();
				} else {
					this.page++;
					this.get_list();
				}
			},
			banner_tiaozhuan(src){
				if(src=='/pages/index/shop'||src=='/pages/index/my'){
					uni.switchTab({
						url:src
					})
				}else{
					uni.navigateTo({
						url:src
					})
				}
				
			},
			get_user() {
				this.$http
					.get({
						url: '/api/getUserInfo',
						data:{
							none_load:true,
						}
					})
					.then(res => {
						if (res.code == 200) {
							if (res.user) {
								this.is_login=true
								this.user = res.user;
								
								
							} else {
								this.is_login=false
							}
						}
					});
			},
			xiangqing(goodsid){
				uni.navigateTo({
					url:'/pages/index/xiangqing?goodsid='+goodsid
				})
			},
           get_list(){
            	this.$http
            		.get({
            			url: '/api/getAllProducts',
						data:{
							page: this.page,
							limit:this.limit,
						}
            		})
            		.then(res => {
            			if(res.code==200){
            				
            				this.list=this.list.concat(res.list)
							if(res.list.length<this.limit){
								this.is_all=true
							}
            				
            			}
            });
           },
			get_banner_list(){
				this.$http
						.get({
							url: '/api/getBannerList',
							data:{
								isDisplayed:1
							}
						})
						.then(res => {
							if(res.code==200){
								
								this.banner_list=res.list
								this.banner_list=this.banner_list.sort((a, b) => a.sort_order - b.sort_order);
							}
				});
			},
			    getTimeState() {
			      // 获取当前时间
			      let timeNow = new Date();
			      // 获取当前小时
			      let hours = timeNow.getHours();
			      // 设置默认文字
			      let state = ``;
			      // 判断当前时间段
			      if (hours >= 0 && hours <= 11) {
			        state = `上午好~`;
			      } else if (hours > 11 && hours <= 13) {
			        state = `中午好~`;
			      } else if (hours > 13 && hours <= 18) {
			        state = `下午好~`;
			      } else if (hours > 18 && hours <= 24) {
			        state = `晚上好~`;
			      }
			      return state;
			    },

			go(url,type) {
				uni.navigateTo({
					url: url
				});
				return false
				var that=this
				if(type&&type==1){
					uni.navigateTo({
						url: url
					});
					return false
				}
				if(!this.is_login){
					// #ifdef MP-WEIXIN||MP-ALIPAY
						 this.$refs.tan_login.open()
					//#endif
				      	
					// #ifdef MP-KUAISHOU
						ks.login({
							success(res) {
								if (res.code) {
									that.ks_code=res.code
									that.$refs.tan_login.open()
								}else {
									uni.showToast({
										title: '快手未登录,无法获取手机号',
										icon: 'none'
									});
									setTimeout(()=>{
										uni.navigateTo({
											url:'/pages/index/login'
										})
									},1000)
								}
							},
						});
					//#endif
					// #ifdef H5||APP-PLUS
					  
					   if(url=='/pages/index/register'){
						   uni.redirectTo({
						   		url:url
						   })
					   }else{
						   uni.redirectTo({
						   		url:'/pages/index/login'
						   })
					   }
					   
					//#endif
					return false
				}
				uni.navigateTo({
					url: url
				});
			},
           saomiao(){
			   if(!this.is_login){
				   uni.navigateTo({
				   	 url:'/pages/index/login'
				   })
				   return false
			   }
			   
			   var that=this
			   // 允许从相机和相册扫码
			   wx.scanCode({
			     success (res) {
				   that.qrScan(res.result)
			     }
			   })
           },
		   qrScan(id){
			   this.$http
			   		.get({
			   			url: '/api/qrScan',
						data:{
							id:id,
							none_load:true
						}
			   		})
			   		.then(res => {
			   			if(res.code==200){
			   				this.$refs.tan_success.open()
			   				this.ma_result=res.result
			   				
			   			}else{
							this.$refs.tan_shibai.open()
							this.shibai_tip=res.error
						}
			   });
		   }

		},
	};
</script>

<style>
page{
	background-color: #f0f2f5;
}
.box{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 30rpx;
}
.box_item{
	border: 2rpx solid #444333;
	width: 45%;
	height: 400rpx;
}
.box_item button{
	
}
.swiper {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.swiper image {
	width: 100%;
	height: 450rpx;
}
.lunbo2 {
	height: 450rpx;
}
.zhaohu_title_left{
	display: flex;
	align-items: center;
}
.zhaohu_title_left image{
	width: 50rpx;
	height: 50rpx;
	margin-right: 10rpx;
}
.zhaohu_title{
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	background-color: #ffffff;
}
.zhaohu_title_right{
	display: flex;
	align-items: center;
}
.zhaohu_title_right image{
	width: 20rpx;
	height: 30rpx;
}
.tg_list {
	display: flex;
	/* align-items: center; */
	flex-wrap: wrap;
	/* background-color: #ffffff; */
	padding: 10rpx 0rpx 0;
}

.item_img{
	width: calc((100% - 0rpx));
	height: 290rpx;
	
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}
.item_img_box{
	padding: 0 40rpx;
}
.item_img .shang_img{ 
	width:100%;
	vertical-align: bottom;
	
}
.item{
	width: calc((100% - 2rpx)/2);
	margin-right: 2rpx;
	background-color: #ffffff;
	/* margin-bottom: 10rpx; */
	overflow: hidden;
	/* border-bottom: 1px solid #eeeeee; */
	box-sizing: border-box;
	/* height: 510rpx; */
	margin-bottom: 2rpx;
	padding-top: 40rpx;
	padding-bottom: 16rpx;
	
}
.item:nth-child(2n){
	margin-right: 0;
	
}
/* .item:nth-child(2n-1){
	border-right: 1px solid #eeeeee;
} */
.item_bottom{
	padding: 0 30rpx;
}
.item_name{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 66rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.item_name text{
	max-width: 240rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item_guige{
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* autoprefixer: off */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    
    /* autoprefixer: on */
	margin-top: 18rpx;
	line-height: 40rpx;
	
}


/* #ifdef MP-ALIPAY||MP-WEIXIN||MP-KUAISHOU */
.item_img .shang_img{
	width: 100% !important;
	height: 100%;
}
/* #endif */

.zuyong{
	margin: 10rpx 0 6rpx;
	display: flex;
	align-items: center;
}
.zuyong text{
	margin-right: 6rpx;
}
.tuijian{
	background-color: #ffffff;
	margin: 10rpx 0 0;
	line-height: 80rpx;
	padding-left: 30rpx;
	display: flex;
	align-items: center;
	
}
.tuijian text{
	width: 4rpx;
	height: 30rpx;
	background-color: #f43a51;
	margin-right: 10rpx;
}
.saomiao{
	/* background-image: linear-gradient(to right, #f43a51, #950b0b); */
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	  /* background-image: linear-gradient(135deg, #f43a51, #950b0b, #7e57c2, #26c6da); */
	  background-image: linear-gradient(135deg, #f43a51, #950b0b, #7e57c2, #26c6da, #007d5c, #55557f);
	  animation: flow 6s ease infinite;
	  background-size: 200% 200%;
	  box-sizing: border-box;
	  position: relative;
	  overflow: hidden;

}
@keyframes flow {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 0%; }
  75% { background-position: 0% 0%; }
  100% { background-position: 0% 50%; }
}
.saomiao_btn{
	border: 1px solid #ffffff;
	line-height: 50rpx;
	width: 160rpx;
	text-align: center;
	border-radius: 14rpx;
}
.tan_login_mima{
	margin-top: 14rpx;
}
.huode{
	width: 400rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	text-align: center;
}
.huode_title{
	line-height: 100rpx;
	font-size: 40rpx;
	color: #f43a51;
}
.huode_bottom,.shibai_bottom{
	
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.huode_bottom button,.shibai_bottom button{
	width: 180rpx;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #f43a51;
	
}
.huode_num{
	line-height: 100rpx;
}
.huode_shibai{
	line-height: 100rpx;
}
.huode_num text{
	margin-right: 10rpx;
}
.shibai_box{
	width: 500rpx;
	background: linear-gradient(135deg, #fce4ec, #f8bbd0);
	border-radius: 10rpx;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.shibai_txt{
	margin: 30rpx 0 30rpx;
}
.shibai_title image{
	width: 100rpx;
	height: 100rpx;
	margin: 30rpx 0 0;
}
.shoukong_box{
	background-color: rgba(0, 0, 0, 0.3);
	height: 290rpx;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shoukong{

	width: 150rpx ;
	height: 150rpx ;
}


 .saomiao::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 10%, transparent 70%);
  border-radius: 40%;
  animation: wave 8s linear infinite;
}

@keyframes wave {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.popup-top-decor,
.popup-bottom-decor {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.popup-top-decor {
    top: -15px;
    left: 0;
}

.popup-bottom-decor {
    bottom: -15px;
    left: 0;
}

.star {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 50% 50%, #ffd700 0%, #ffb300 100%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: starTwinkle 2s infinite alternate;
}

.star-1 {
    margin-left: 20px;
}

.star-2 {
    margin-right: 20px;
}

.star-3 {
    margin-left: 20px;
}

.star-4 {
    margin-right: 20px;
}
.shibai_box_bg{
	background: linear-gradient(135deg, #eeeeee, #f0f2f8);
}
</style>